---
interface Props {
  number?: number;
  title?: string;
}

const { number, title } = Astro.props;
---

<div class="number">
  <div class="number-circle">{number}</div>
  <div class="number-title">
    {title && <h1>{title}</h1>}
  </div>
  <div>
    <slot />
  </div>
</div>

<style>
  .number {
    padding: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
  }

  .number-circle {
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 2px rgba(2, 132, 199, 0.8);
    width: 2rem;
    height: 2rem;
    color: #0284c7;
    display: flex;
    padding: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  .number-title h1 {
    color: rgba(0, 0, 0, 0);
    background: linear-gradient(
      to bottom,
      var(--sl-color-white) 30%,
      var(--prompty-blue)
    );
    background-clip: text;
    font-weight: 600;
    padding-block: 0.2rem;
    font-size: clamp(
      var(--sl-text-2xl),
      calc(0.25rem + 5vw),
      var(--sl-text-3xl)
    );
    line-height: 2rem;
  }
</style>
